<template>
  <div>
    <el-container>
      <el-header height="80px">
        <span class="ac">小U商城后台管理系统</span>
        <span class="ad">
          欢迎老板：{{ $store.getters.getUserInfo.username }}
          <el-button @click="logout" size="mini" type="danger">退出</el-button>
        </span>
      </el-header>
      <el-container>
        <el-aside width="250px">
          <v-nav></v-nav>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
//引入封装好左侧导航菜单
import vNav from "../components/vNav";
export default {
  data() {
    return {};
  },
  components: {
    vNav,
  },
  methods: {
    //封装一个退出事件
    logout() {
      this.$store.dispatch("changeUserAction", false);
      //去登录页
      this.$router.push("/login");
    },
  },
  beforeRouteLeave(to, from, next) {
    //离开之后让它重新加载
    location.reload();
  },
};
</script>

<style lang="stylus" scoped>
@import '../stylus/index.styl';

.el-header {
  background: $secondColor;
  color: #fff;
  font-size: 24px;
}

.ac {
  line-height: 80px;
}

.ad {
  font-size: 16px;
  margin-left: 65%;
  padding-bottom: 5px;
}
</style>
